<template>
  <div>
    <el-descriptions class="margin-top" title="" :column="5" size="medium" border>
      <el-descriptions-item>
        <template slot="label">
          S/N：
        </template>
        {{ item.groupId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          群組名：
        </template>
        {{ item.groupName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          追蹤器權限：
        </template>
        <group-assets-list :item="item"></group-assets-list>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          網盤權限：
        </template>
        <group-network-list :item="item"></group-network-list>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          操作：
        </template>
        <el-button type="success" @click="onChangeUser(item)" size="small">修改群組名</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-drawer
      title="修改群組名稱"
      :visible.sync="drawer"
      direction="btt"
      :wrapperClosable="false"
      ref="drawer"
      >
      <el-row :gutter="10" justify="end" type="flex" class="text-right">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input placeholder="請輸入群組id" v-model="changeForm.groupId" readonly>
            <template slot="prepend">S/N</template>
          </el-input>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input placeholder="請輸入新的群組名稱" v-model="changeForm.groupName">
            <template slot="prepend">新的群組名稱</template>
          </el-input>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <el-button type="primary" @click="onChangeSubmit">確定</el-button>
          </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import GroupAssetsList from './group-assets-list'
import GroupNetworkList from './group-network-list'

export default {
  name: 'group-list',

  components: {
    [GroupAssetsList.name]: GroupAssetsList,
    [GroupNetworkList.name]: GroupNetworkList
  },

  props: ['item'],

  data() {
    return {
      changeForm: {//修改用
        groupName: '',
        groupId: ''
      },
      loading: false,
      drawer: false,
    }
  },

  methods: {
    //修改群组
    onChangeUser(item) {
      this.drawer = true
      this.changeForm.groupId = item.groupId
      this.changeForm.groupName = item.groupName
    },

    //修改提交
    onChangeSubmit() {
      this.$confirm('此操作將修改 S/N :' + this.changeForm.groupId +' 的群組名稱為：' + this.changeForm.groupName + ', 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$store.dispatch('account/fetchEditGroup', this.changeForm).then(res => {
          console.log('修改提交')
          console.log(res)

          this.$message.success(res.message)
          this.changeForm = {
            groupName: ''
          }
          //关闭抽屉
          this.drawer = false
          this.loading = false
          this.$emit('reload')
        }).catch(err => {
          this.loading = false
          console.log(err,2)
          this.$message.error(err+'2')
          return false
        })
      }).catch(() => {
        //取消动作
      })
    },
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/them.scss";

.green {
  color: $connectColor;
}

.red {
  color: $disconnectColor;
}

/deep/ .el-descriptions {
  margin-bottom: 10px !important;

  .is-bordered {
    table-layout: fixed !important;
  }

  .el-descriptions-item__cell {
    word-break: break-all;
  }
}

.text-right {
  padding: 0 20px;
  text-align: right;
}
</style>
